    var box = document.querySelector('.box')
    var ol = document.querySelector('.box ol')
    var ulis = document.querySelectorAll('.box ul li')
    var olis = document.querySelectorAll('.box ol li')
    var c = document.querySelector('.c')
    var id = localStorage.getItem('id')
    var token = localStorage.getItem('token')
    for (let i = 0; i < ulis.length - 1; i++) {
        ulis[i].onmouseover = function () {
            for (let j = 0; j < ulis.length - 1; j++) {
                ulis[j].className = ''
                olis[j].className = ''
                ol.className = ''
            }
            getStyle(box, 'height')
            // console.dir(box);
            ulis[i].className = 'active'
            olis[i].className = 'active'
            ol.className = 'active'
        }
        box.onmouseout = function () {
            ulis[i].className = ''
            olis[i].className = ''
            ol.className = ''
        }
    }
 
   
    var str = localStorage.getItem('data')
    console.log(str);
    //判断购物车中是否获取到数据
    if(str === null){
        var str = `
        <div class="jumbotron">
            <h1>购物车空空如也
            ！</h1>
            <p>心动不行动，赶快去列表页挑选商品吧！</p>
            <p><a class="btn btn-primary btn-lg" href="list.html" role="button">列表页</a></p>
        </div>
        `
            c.innerHTML = str;
            // return;
        }
//无，空的，列表
    //转成数组
    var arr = JSON.parse(str)
    var id = localStorage.getItem('id')
    var c = document.querySelector('.c');

    if (id) {
        // 发送请求获取数据
        var xhr = new XMLHttpRequest;
        var xhr = new XMLHttpRequest;
        xhr.open('post', '/ararar')
        xhr.setRequestHeader('content-type', 'application/json;charset=UTF-8')
        xhr.send('{"channelCode":"BROS"}')
        xhr.onload = function () {
            var res = xhr.responseText;
            res = JSON.parse(res)
            console.log(res);
            var { serializableData } = res;
            var data=[]
            for (var i = 0; i < serializableData.length; i++) {
                for (var j = 0; j < serializableData[i].getAllProductLastCategoryDataList.length; j++) {
                    data.push(serializableData[i].getAllProductLastCategoryDataList[j].productList)
                }
            }
            console.log(data);

            //处理data(获取数据可能不唯一，商品id会有重复，去重)
            //数组扁平化
            var list=[];
            for(var i = 0;i < data.length;i++){
                for (var j = 0; j < data[i].length; j++) {
                   list.push(data[i][j]);
                }
            }
            // 去重
                for(var i = 0;i < list.length;i++){
                    for(var j = i+1;j < list.length;j++){
                        console.log(list[i].productCode);
                        if(list[i].productCode == list[j].productCode){
                            list.splice(j,1);
                            j--;
                        }
                    }
                }
                console.log(list);
            var arr1 = []
            // 根据商品id找到对应要处理的数据
            for (var i = 0; i < list.length; i++) {
                    for(var k = 0;k < arr.length;k++){
                        if (list[i].productCode === arr[k].productCode) {
                            var obj = list[i]
                            console.log(1);
                            arr1.push({id:obj,num:arr[k].num})
                        }
                    }
            }
            console.log(arr1);

            var cart = ''
            arr1.forEach(item=>{
                console.log(item);
               
                    cart += `

                    <tr>
                        <td><input type="checkbox" name="selectOne" checked></td>
                        <td>
                            <img src="${item.id.productImageDefault}" widtd=80 height=80>
                        </td>
                        <td>
                            <p>${item.id.productName.slice(0, 10)}</p>
                            <p>${item.id.seriesCatalogName}</p>
                        </td>
                        <td>￥<span class="price">${item.id.defaultPrice}</span>元</td>
                        <td data-id=${item.id.id}>
                            <button class="reduce">-</button>
                            <input type="number" value="${item.num}" name="number">
                            <button class="add">+</button>
                        </td>
                        <td>￥<span class="subtotal">${item.id.defaultPrice * item.num}</span>元</td>
                        <td data-score="${item.id.productScore}" data-id="${item.id.productCode}"><button class="remove">删除购物车</button></td>
                    </tr>
                
                        `
            })
            document.querySelector('.cart tbody').innerHTML = cart
            remove()
            count()
            select()
            handlerNumber()
        }
    }else {
        alert("请先登录")
        location.href = "login.html"
    }

// 删除购物车
function remove() {
    var removes = document.querySelectorAll('.remove');
    for (var i = 0; i < removes.length; i++) {
        removes[i].onclick = function () {
            // console.log(this.parentElement.parentElement);
            if (!confirm("你确定要删除吗？")) {
                return false
            }
            //获取点击删除的商品的productCode
            var goodsid = this.parentElement.getAttribute('data-id')
            // console.log(goodsid);
            //获取本地存储数据中的商品数据
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            var index = data.findIndex(item=>item.productCode===goodsid)
            data.splice(index,1)
            localStorage.setItem('data',JSON.stringify(data))
            this.parentElement.parentElement.parentElement.removeChild(this.parentElement.parentElement)
        }
    }
}
function count() {
    var numbers = document.querySelectorAll('[name="number"]');
    var prices = document.querySelectorAll('.price');
    var subtotals = document.querySelectorAll('.subtotal');
    for (var i = 0; i < numbers.length; i++) {
        subtotals[i].innerText = (prices[i].innerText - 0) * (numbers[i].value - 0)
    }
    // 计算总数量
    var n = 0;
    var p = 0
    var selectOne = document.querySelectorAll('[name="selectOne"]');
    console.log(selectOne);
    // 转数组
    var arry = [].slice.call(selectOne)
    var brry = arry.filter(item => item.checked)
    console.log(brry);
    brry.forEach((v, i) => {
        var num = v.parentElement.parentElement.querySelector('[name="number"]').value - 0
        n += num
        var price = v.parentElement.parentElement.querySelector('.subtotal').innerText - 0
        p += price
    })
    document.querySelector('.totalNum').innerText = n;
    document.querySelector('.totalPrice').innerText = p;
    // var goodsid = this.parentElement.getAttribute('data-id')
    var data = localStorage.getItem('data')
    //找到商品id的数量
    console.log(data);
    // var index = arr.findIndex(item=>item.productCode===goodsid)
    // console.log(index);
        //    data.splice(index,1)
        //    console.log(data)
        //    localStorage.setItem('data',JSON.stringify(data))
}
function select() {
    var selectAll = document.querySelectorAll('[name="selectAll"]');
    var selectOne = document.querySelectorAll('[name="selectOne"]');
    for (var i = 0; i < selectAll.length; i++) {
        selectAll[i].onclick = function () {
            for (var j = 0; j < selectOne.length; j++) {
                selectOne[j].checked = this.checked
            }
            for (var j = 0; j < selectAll.length; j++) {
                selectAll[j].checked = this.checked
            }
            count()
        }
    }
    for (var i = 0; i < selectOne.length; i++) {
        selectOne[i].onclick = function () {
            var arr = [].slice.call(selectOne)
            var bool = arr.every(item => item.checked)
            for (var j = 0; j < selectAll.length; j++) {
                selectAll[j].checked = bool;
            }
            count()
        }
    }
}
function handlerNumber() {
    //数量减
    var reduces = document.querySelectorAll('.reduce');
    for (var i = 0; i < reduces.length; i++) {
        reduces[i].onclick = function () {
            var num = this.nextElementSibling.value - 0;
            num--;
            if (num <= 1) {
                num = 1;
            }
            // 将自减以后的数字放回到input中
            this.nextElementSibling.value = num;
            // 获取当前商品的id
            var goodsid = this.parentElement.parentElement.lastElementChild.getAttribute('data-id')
            //获取本地存储中数据
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            
            var obj = data.find(item=>item.productCode === goodsid)
            //将新num存储到本地
            obj.num = num
            localStorage.setItem('data',JSON.stringify(data))
            count()
        }
    }

    var numbers = document.querySelectorAll('[name="number"]');
    for (var i = 0; i < numbers.length; i++) {
        numbers[i].oninput = function () {
            var goodsid = this.parentElement.parentElement.lastElementChild.getAttribute('data-id')
            var num = this.value;
            if (num <= 1) {
                num = 1
                this.value = num
            }
            // 获取库存
            var score = this.parentElement.parentElement.lastElementChild.getAttribute('data-score') - 0
            if (num > score) {
                num = score
                this.value = num
            }
            console.log(num);
            //获取本地存储中数据
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            
            var obj = data.find(item=>item.productCode === goodsid)
            //将新num存储到本地
            obj.num = num
            localStorage.setItem('data',JSON.stringify(data))
            // editNumber(id, goodsid, num, token)
            count()
        }
    }

    //数量加
    var adds = document.querySelectorAll('.add');
    for (var i = 0; i < adds.length; i++) {
        adds[i].onclick = function () {
            // 先获取当前加按钮的上一个兄弟标签 - 放数量的那个input中的值
            var num = this.previousElementSibling.value - 0;
            // 自增
            num++;
            // 限制最大值
            // 获取库存
            var score = this.parentElement.parentElement.lastElementChild.getAttribute('data-score')
            console.log(score);
            if (num >= score) {
                num = score
            }
            // 将自减以后的数字放回到input中
            this.previousElementSibling.value = num
            // 获取当前商品的id
            // console.log();
            var goodsid = this.parentElement.parentElement.lastElementChild.getAttribute('data-id')
            console.log(goodsid);
            //获取本地存储中数据
            var data = localStorage.getItem('data')
            data = JSON.parse(data)
            
            var obj = data.find(item=>item.productCode === goodsid)
            //将新num存储到本地
            obj.num = num
            localStorage.setItem('data',JSON.stringify(data))

            // 思路：
            // 发送请求 - 将数据库中的数量也进行修改
            // 获取当前商品的id
            // var goodsid = this.parentElement.parentElement.lastElementChild.getAttribute('data-id')
            // editNumber(id, goodsid, num, token)
        
            // 获取本地存储的数据 - str - arr

            // 将当前修改数量的数据id获取到 - id

            // 根据这个id找到本地存储中要修改的那个对象 - var obj = arr.find(item.id === id)

            // 修改对象的number - obj.number = 新的数量

            // 将arr重新存到本地存储

            count()
        }
    }
}


